<template>
    <div>
        <h3 class="title">{{ configAll.title }}</h3>
        <div class="desc">
            <p>接上级疫情防控要求,为研学活动师生安全,及时掌握相关情况,组织方需排查师生生活轨迹是否涉及相关区域.请全体参加本次研学的学生及家长如实填写,如因虚假填报造成严重后果,将依法追求相关责任.</p>
        </div>
        <div>截止时间: {{ configAll.time }}</div>
        <div>
            <el-form label-position="top" :rules="rules" ref="form" label-width="80px" :model="form">
                <el-form-item label="01 学生姓名" prop="studentName">
                    <el-input placeholder="请输入学生姓名" v-model="form.studentName"></el-input>
                </el-form-item>
                <el-form-item label="02 学生性别" prop="studentSex">
                    <el-radio-group v-model="form.studentSex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="03 学校" prop="school">
                    <el-input placeholder="请输入学校(简称即可)" v-model="form.school"></el-input>
                </el-form-item>
                <el-form-item label="04 年级" prop="grade">
                    <el-input placeholder="请输入年级(数字即可)" v-model="form.grade"></el-input>
                </el-form-item>
                <el-form-item label="05 家长姓名" prop="parentName">
                    <el-input placeholder="请输入家长姓名" v-model="form.parentName"></el-input>
                </el-form-item>
                <el-form-item label="06 家长联系电话" prop="phone">
                    <el-input placeholder="请输入家长联系电话" type="tel" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="07 家庭住址" prop="address">
                    <el-input placeholder="方便我们安排接送大巴,请写 园区/新区 某小区即可" v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="08 孩子及家长健康码" prop="healthCodeList">
                    <el-upload
                        action="https://upload.qiniup.com"
                        list-type="picture-card"
                        :file-list="form.healthCodeList"
                        ref="upload"
                        :limit="2"
                        :on-success="onHealthSuccess"
                        :on-remove="handleHealthRemove"
                        :data="postData"
                        accept="png,jpg,jpeg"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="09 家长行程码" prop="tourCodeList">
                    <el-upload
                        action="https://upload.qiniup.com"
                        list-type="picture-card"
                        :file-list="form.tourCodeList"
                        ref="upload"
                        :limit="2"
                        :on-success="onTourSuccess"
                        :on-remove="handleTourRemove"
                        :data="postData"
                        accept="png,jpg,jpeg"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="10 孩子及家长身份信息" prop="identityList">
                    <el-upload
                        action="https://upload.qiniup.com"
                        list-type="picture-card"
                        :file-list="form.identityList"
                        ref="upload"
                        :limit="2"
                        :on-success="onIdentitySuccess"
                        :on-remove="handleIdentityRemove"
                        :data="postData"
                        accept="png,jpg,jpeg"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
const axios = require('axios');

export default {
    data() {
        return {
            postData: {
                token: ''
            },
            configAll: [],
            qiniuUrl: "http://qy5b5wunl.hd-bkt.clouddn.com/",
            form: {
                studentName: '',
                studentSex: '',
                school: '',
                grade: '',
                parentName: '',
                phone: '',
                address: '',
                healthCodeList: [],
                tourCodeList: [],
                identityList: []
            },
            rules: {
                studentName: [
                    {required: true, message: '请输入学生姓名', trigger: 'bulr'}
                ],
                studentSex: [
                    {required: true, message: '请选择学生性别', trigger: 'change'}
                ],
                school: [
                    {required: true, message: '请输入学校', trigger: 'bulr'}
                ],
                grade: [
                    {required: true, message: '请输入年级', trigger: 'bulr'}
                ],
                parentName: [
                    {required: true, message: '请输入家长姓名', trigger: 'bulr'}
                ],
                phone: [
                    {required: true, message: '请输入家长联系电话', trigger: 'bulr'}
                ],
                address: [
                    {required: true, message: '请输入家庭住址', trigger: 'bulr'}
                ],
                healthCodeList: [
                    {required: true, message: '请上传孩子及家长健康码', trigger: 'change'}
                ],
                tourCodeList: [
                    {required: true, message: '请上传家长行程码', trigger: 'change'}
                ],
                identityList: [
                    {required: true, message: '请上传孩子及家长身份信息', trigger: 'change'}
                ],
            }
        }
    },
    mounted() {
        this.token();
        this.configApi();
    },
    methods: {
        token() {
            var that = this;
            axios.get('/api/token').then(function (response) {
                that.postData.token = response.data.token;
            }).catch(function (error) {
                console.log(error);
            });
        },
        configApi() {
            var that = this;
            axios.get('/api/config').then(function (response) {
                that.configAll = response.data;
            }).catch(function (error) {
                console.log(error);
            });
        },
        submitForm(formName) {
            var that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(that.form)
                    axios.request({
                        url: '/api/antis',
                        method: 'POST',
                        data: that.form,
                        headers: {"Content-Type": "application/json;charset=UTF-8", 'Authorization': `Bearer 123`}
                    })
                        .then(function (response) {
                            console.log(response);
                            that.$message({message: '提交成功', type: 'success'});
                            setTimeout(function () {
                                location.reload();
                            }, 2000)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleHealthRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleTourRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleIdentityRemove(file, fileList) {
            console.log(file, fileList);
        },
        onHealthSuccess(file, fileList) {
            this.form.healthCodeList.push({name: fileList.name, url: this.qiniuUrl + file.key});
            console.log(file, fileList);
        },
        onTourSuccess(file, fileList) {
            this.form.tourCodeList.push({name: fileList.name, url: this.qiniuUrl + file.key});
            console.log(file, fileList);
        },
        onIdentitySuccess(file, fileList) {
            this.form.identityList.push({name: fileList.name, url: this.qiniuUrl + file.key});
            console.log(file, fileList);
        },
    }
}
</script>
<style>
.title {
    padding: 20px 0;
}

.desc {
    font-size: 12px;
}

.el-upload--picture-card {
    width: 84px;
    height: 84px;
    line-height: 94px;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 84px;
    height: 84px;
}
</style>
